import { getChartByAiUsingPOST } from '@/services/arong/chartController';
import { UploadOutlined } from '@ant-design/icons';
import {Button, Card, Col, Divider, Form, Input, message, Row, Select, Space, Spin, Upload} from 'antd';
import React, { useState } from 'react';
import ReactECharts from 'echarts-for-react';
import './styles.css';

/**
 * 添加图表页面
 * @constructor
 */
const AddChart: React.FC = () => {
  const [chart, setChart] = useState<API.BIResponse>();
  const [option, setOption] = useState<any>();
  const [submitting, setSubmitting] = useState<boolean>(false);
  const [changeInput, setChangeInput] = useState<boolean>(false);
  
  const [form] = Form.useForm();

  const { TextArea } = Input;


  /**
   * 提交
   * @param values
   */
  const onFinish = async (values: any) => {
    // 避免重复提交
    if (submitting) {
      return;
    }
    setSubmitting(true);
    setChart(undefined);
    setOption(undefined);
    try {
      let res = null;
    if(typeof values.file === 'string'){
      const params = {
        chartType: values.chartType,
        goal: values.goal,
        name: values.name,
        res: values.file,
      };
      res = await getChartByAiUsingPOST(params, {});
    } else {
    // 对接后端，上传数据
    const params = {
      ...values,
      file: undefined,
    };
      res = await getChartByAiUsingPOST(params, {}, values.file.file.originFileObj);
  }
      if (!res?.data) {
        message.error('分析失败');
      } else {
        const chartOption = JSON.parse(res.data.genChart ?? '');
        if (!chartOption) {
          throw new Error('图表代码解析错误')
        } else {
          setChart(res.data);
          setOption(chartOption);
        }
        message.success('分析成功');
      }
    } catch (e: any) {
      message.error('分析失败，' + e.message);
    }
    setSubmitting(false);
  };

  const defaultValue = () => {
    form.setFieldsValue({
        goal: '分析网站用户的增长情况',
        name: '用户分析',
        chartType: '折线图',
        file: `日期,用户数
        string,number
        1号,10
        2号,20
        3号,30
        4号,90
        5号,0
        6号,10
        7号,20`,
    });
  };

  const changeInputMethod = () => {
    setChangeInput(!changeInput);
  };

  return (
    <div className="add-chart">
      <Row gutter={24}>
        <Col span={12}>
          <Card title="智能分析" extra={
        <Button type="primary" onClick={defaultValue}>默认示例</Button>
      }>
            <Form name="addChart" 
                  form={form}
                  labelAlign="left" 
                  labelCol={{ span: 4 }}
                  wrapperCol={{ span: 16 }} 
                  onFinish={onFinish} 
                  initialValues={{}}>
              <Form.Item
                name="goal"
                label="分析目标"
                rules={[{ required: true, message: '请输入分析目标' }]}
              >
                <TextArea placeholder="请输入你的分析需求，比如：分析网站用户的增长情况" />
              </Form.Item>
              <Form.Item name="name" label="图表名称" rules={[{ required: true, message: '请输入分析目标' }]}>
                <Input placeholder="请输入图表名称" />
              </Form.Item>
              <Form.Item name="chartType" label="图表类型">
                <Select
                  options={[
                    { value: '折线图', label: '折线图' },
                    { value: '柱状图', label: '柱状图' },
                    { value: '堆叠图', label: '堆叠图' },
                    { value: '饼图', label: '饼图' },
                    { value: '雷达图', label: '雷达图' },
                  ]}
                />
              </Form.Item>
              <Form.Item name="file" label="原始数据">
              {changeInput ?
              (<Upload name="file" maxCount={1}>
                  <Button icon={<UploadOutlined />}>上传 CSV 文件</Button>
                </Upload>) : 
                (<TextArea placeholder='输入csv格式字符串'/>)
             }
              </Form.Item>

              <Form.Item wrapperCol={{ span: 16, offset: 4 }}>
                <Space>
                  <Button type="primary" htmlType="submit" loading={submitting} disabled={submitting}>
                    提交
                  </Button>
                  <Button htmlType="reset">重置</Button>
                  <a onClick={changeInputMethod}>转换输入方式</a>
                </Space>
              </Form.Item>
            </Form>
          </Card>
        </Col>
        <Col span={12}>
          <Card title="分析结论">
            {chart?.genResult ? chart?.genResult : !submitting ? <div className='text'>请先在左侧进行提交</div> : 
                                      <Spin spinning={submitting} size='large'>
                                        <div className='content'/>
                                      </Spin>
                }
          </Card>
          <Divider />
          <Card title="可视化图表">
            {
              option ? <ReactECharts option={option} /> : 
                        !submitting ? <div className='text'>请先在左侧进行提交</div> : 
                                      <Spin spinning={submitting} size='large'>
                                        <div className='content'/>
                                      </Spin>
            }
          </Card>
        </Col>
      </Row>
    </div>
  );
};


export default AddChart;
